<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="{{ url_for('static', filename='/common/css/info.css') }}" rel="stylesheet">
    <title> Enter Your Mail </title>
</head>
<body>
<div class="container">
    <div class="box">
        <div class="content">
            <h1>Dreams Library</h1>
            <div>
                <div class="display" data-text="Awesome" style="position: absolute; top: 130px; left: 110px">
                    <span class="actual-text">&nbsp;Username&nbsp;</span>
                    <span aria-hidden="true" class="hover-text">&nbsp;Username&nbsp;</span>
                </div>
                <div class="display" data-text="Awesome" style="position: absolute; top: 210px; left: 110px; --animation-color: #ff6b6b;">
                    <span class="actual-text">&nbsp;Name&nbsp;</span>
                    <span aria-hidden="true" class="hover-text">&nbsp;Name&nbsp;</span>
                </div>
                <div class="display" data-text="Awesome" style="position: absolute; top: 290px; left: 110px; --animation-color: #ffabab;">
                    <span class="actual-text">&nbsp;Phone&nbsp;</span>
                    <span aria-hidden="true" class="hover-text">&nbsp;Phone&nbsp;</span>
                </div>
                <div class="display" data-text="Awesome" style="position: absolute; top: 370px; left: 110px; --animation-color: #ffe9e9;">
                    <span class="actual-text">&nbsp;Mail&nbsp;</span>
                    <span aria-hidden="true" class="hover-text">&nbsp;Mail&nbsp;</span>
                </div>
                <div class="display" data-text="Awesome" style="position: absolute; top: 450px; left: 110px; --animation-color: #ffffff;">
                    <span class="actual-text">&nbsp;Gender&nbsp;</span>
                    <span aria-hidden="true" class="hover-text">&nbsp;Gender&nbsp;</span>
                </div>
            </div>
            <div>
                <div class="display_2" style="position: absolute; top: 120px; left: 400px">
                    <span>{{ username }}<span style="opacity: 20%; font-size: 22px; ">#{{ id }}</span></span>
                </div>
                <div class="display_2" style="position: absolute; top: 200px; left: 400px">
                    <span>{{ name }}</span>
                </div>
                <div class="display_2" style="position: absolute; top: 280px; left: 400px">
                    <span>{{ phone }}</span>
                </div>
                <div class="display_2" style="position: absolute; top: 360px; left: 400px">
                    <span>{{ mail }}</span>
                </div>
                <div class="display_2" style="position: absolute; top: 440px; left: 400px">
                    <span>{{ gender }}</span>
                </div>
            </div>
            <div>
                <a href="{{ url_for('user.user_change_password', id=id) }}" class="tooltip-container" style="position: absolute; top: 170px; left: 1070px; --tooltip-backgroud: #3eefbd;">
                    <span class="text">更新密码</span>
                    <span>Click</span>
                </a>
                <a href="{{ url_for('user.update_info', id=id) }}" class="tooltip-container color" style="position: absolute; top: 220px; left: 1070px; --tooltip-backgroud: #5faff5;">
                    <span class="text">编辑信息</span>
                    <span>Click</span>
                </a>
                <a href="{{ url_for('user.redirect_login') }}" class="tooltip-container color" style="position: absolute; top: 270px; left: 1070px; --tooltip-backgroud: #f56b5f;">
                    <span class="text">切换账户</span>
                    <span>Click</span>
                </a>
                <a href="{{ url_for('user.user_deregister', id=id) }}" class="tooltip-container color" style="position: absolute; top: 320px; left: 1070px; --tooltip-backgroud: #ff0000;">
                    <span class="text">注销账户</span>
                    <span>Sure?</span>
                </a>
            </div>
            <ul class="icon_1">
                <li class="icon-content" style="position: absolute; top:370px; left:1090px">
                    <a href="https://github.com/AXuanCreator/Flask-Web/" aria-label="GitHub" data-social="github">
                        <div class="filled"></div>
                        <svg
                                xmlns="http://www.w3.org/2000/svg"
                                width="16"
                                height="16"
                                fill="currentColor"
                                class="bi bi-github"
                                viewBox="0 0 16 16"
                                xml:space="preserve"
                        >
                                <path
                                        d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8"
                                        fill="currentColor"
                                ></path>
                          </svg>
                    </a>
                </li>
            </ul>
            <span style="position: absolute; top:520px; opacity: 15%">生命因何而沉睡...?</span>
        </div>
    </div>
</div>
</body>
</html>